<template>
  <div>
    <c-r-m-list-head
      title="公海管理"
      placeholder="请输入客户名称/地区/电话"
      @on-handle="listHeadHandle"
      @on-search="crmSearch"
      main-title="新建客户"
      @on-export="exportInfos"
      isSeas
      crm-type="customer"
    >
    </c-r-m-list-head>
    <div
      v-empty="!crm.customer.pool"
      xs-empty-icon="nopermission"
      xs-empty-text="暂无权限"
      class="crm-container"
    >
      <c-r-m-table-head
        ref="crmTableHead"
        crm-type="customer"
        :isSeas="isSeas"
        @filter="handleFilter"
        @handle="handleHandle"
        @scene="handleScene"
      ></c-r-m-table-head>
      <el-table
        class="n-table--border"
        id="crm-table"
        v-loading="loading"
        :data="list"
        :height="tableHeight"
        stripe
        border
        highlight-current-row
        style="width: 100%"
        :cell-style="cellStyle"
        @row-click="handleRowClick"
        @header-dragend="handleHeaderDragend"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          show-overflow-tooltip
          type="selection"
          align="center"
          width="55"
        >
        </el-table-column>
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          show-overflow-tooltip
          :fixed="index == 0"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="fieldFormatter"
        >
          <template slot="header" slot-scope="scope">
            <div class="table-head-name">{{ scope.column.label }}</div>
          </template>
        </el-table-column>
        <el-table-column> </el-table-column>
        <el-table-column fixed="right" width="36">
          <template slot="header" slot-scope="slot">
            <img
              src="@/assets/img/t_set.png"
              @click="handleTableSet"
              class="table-set"
            />
          </template>
        </el-table-column>
      </el-table>
      <div class="p-contianer">
        <el-pagination
          class="p-bar"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <customer-detail
      v-if="showDview"
      :id="rowID"
      :is-seas="isSeas"
      type="seas"
      @handle="handleHandle"
      @hide-view="showDview = false"
      class="d-view"
    ></customer-detail>
    <fields-set
      :crmType="crmType"
      :isSeas="isSeas"
      @set-success="setSave"
      :dialogVisible.sync="showFieldSet"
    ></fields-set>
  </div>
</template>

<script>
import CustomerDetail from "../customer/CustomerDetail";
import table from "../mixins/table";

export default {
  /** 客户管理 的 公海列表 */
  name: "seacIndex",
  components: {
    CustomerDetail
  },
  mixins: [table],
  data() {
    return {
      crmType: "customer",
      isSeas: true //是公海
    };
  },
  computed: {},
  mounted() {},
  methods: {
    /** 通过回调控制style */
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === "name") {
        return { color: "#3E84E9", cursor: "pointer" };
      } else {
        return "";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/table.scss";
</style>
